import React from 'react'
import { useState } from 'react'
import './TodoHeader.css'
export default function TodoHeader({addTodo}) {
  let [msg,setmsg] = useState('')
  let change = (e)=>{
    setmsg(e.target.value)
  }
  // 回车事件
  let handleKetUp = (e)=>{
    if(e.keyCode === 13){
      if(msg.length === 0) return
      addTodo(msg);
      // 清空input的value
      setmsg('')
    }
  }
  return (
    <div className="todo-header">
        <input value={msg} onKeyUp={handleKetUp} onChange={change} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
    </div>
  )
}
